<!DOCTYPE html>
<html>
<head>
    <title>{% block titulo %}{{ lista.titulo }} - Juvenis{% endblock %}</title>
    <link href="{{ MEDIA_URL }}css/layout.css" rel="stylesheet" type="text/css" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- Facebook -->
    <meta property="og:title" content="{{ lista.titulo }}"/>
    <meta property="og:type" content="website"/>
    <meta property="og:url" content="http://juvenis.com.br{{ lista.get_absolute_url }}"/>
    <meta property="og:image" content="http://juvenis.com.br{{ lista.imagemDestaque.url_300x225 }}"/>
    <meta property="og:site_name" content="Juvenis" />
    <meta property="og:description" content="{{ lista.subtitulo }}"/>

    <link href="{{ lista.imagemDestaque.url_300x225 }}" rel="image_src" />
    <link rel="icon" type="image/x-icon" href="{{ MEDIA_URL }}img/favicon.png" />
    <meta name="description" content="{{ lista.subtitulo }}" />
    <meta name="keywords" content="shows, gospel, humor" />

    <script src="{{ MEDIA_URL }}js/jquery.min.js"></script>
    <!-- Galeria -->
    <!-- First, add jQuery (and jQuery UI if using custom easing or animation
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

         Second, add the Timer and Easing plugins -->
    <script type="text/javascript" src="{{ MEDIA_URL }}js/jquery.timers-1.2.js"></script>
    <script type="text/javascript" src="{{ MEDIA_URL }}js/jquery.easing.1.3.js"></script>

    <!-- Third, add the GalleryView Javascript and CSS files -->
    <script type="text/javascript" src="{{ MEDIA_URL }}js/jquery.galleryview-3.0-dev.js"></script>
    <link type="text/css" rel="stylesheet" href="{{ MEDIA_URL }}css/jquery.galleryview-3.0-dev.css" />

    <!-- Lastly, call the galleryView() function on your unordered list(s) -->
    <script type="text/javascript">
        $(function(){
            $('#myGallery').galleryView({
                transition_speed: 1000,                 //INT - duration of panel/frame transition (in milliseconds)
                transition_interval: 1000,              //INT - delay between panel/frame transitions (in milliseconds)
                easing: 'swing',                                //STRING - easing method to use for animations (jQuery provides 'swing' or 'linear', more available with jQuery UI or Easing plugin)
                show_panels: true,                              //BOOLEAN - flag to show or hide panel portion of gallery
                show_panel_nav: false,                  //BOOLEAN - flag to show or hide panel navigation buttons
                enable_overlays: true,                  //BOOLEAN - flag to show or hide panel overlays

                panel_width: 900,                               //INT - width of gallery panel (in pixels)
                panel_height: 500,                              //INT - height of gallery panel (in pixels)
                panel_animation: 'slide',               //STRING - animation method for panel transitions (crossfade,fade,slide,none)
                panel_scale: 'fit',                    //STRING - cropping option for panel images (crop = scale image and fit to aspect ratio determined by panel_width and panel_height, fit = scale image and preserve original aspect ratio)
                overlay_position: 'bottom',     //STRING - position of panel overlay (bottom, top)
                pan_images: true,                               //BOOLEAN - flag to allow user to grab/drag oversized images within gallery
                pan_style: 'drag',                              //STRING - panning method (drag = user clicks and drags image to pan, track = image automatically pans based on mouse position
                pan_smoothness: 15,                             //INT - determines smoothness of tracking pan animation (higher number = smoother)
                start_frame: 1,                                 //INT - index of panel/frame to show first when gallery loads
                show_filmstrip: true,                   //BOOLEAN - flag to show or hide filmstrip portion of gallery
                show_filmstrip_nav: true,               //BOOLEAN - flag indicating whether to display navigation buttons
                enable_slideshow: false,                        //BOOLEAN - flag indicating whether to display slideshow play/pause button
                autoplay: false,                                //BOOLEAN - flag to start slideshow on gallery load
                show_captions: true,                    //BOOLEAN - flag to show or hide frame captions
                filmstrip_size: 3,                              //INT - number of frames to show in filmstrip-only gallery
                filmstrip_style: 'scroll',              //STRING - type of filmstrip to use (scroll = display one line of frames, scroll filmstrip if necessary, showall = display multiple rows of frames if necessary)
                filmstrip_position: 'bottom',   //STRING - position of filmstrip within gallery (bottom, top, left, right)
                frame_width: 154,                               //INT - width of filmstrip frames (in pixels)
                frame_height: 75,                               //INT - width of filmstrip frames (in pixels)
                frame_opacity: 0.5,                     //FLOAT - transparency of non-active frames (1.0 = opaque, 0.0 = transparent)
                frame_scale: 'crop',                    //STRING - cropping option for filmstrip images (same as above)
                frame_gap: 5,                                   //INT - spacing between frames within filmstrip (in pixels)
                show_infobar: true,                             //BOOLEAN - flag to show or hide infobar
                infobar_opacity: 1                              //FLOAT - transparency for info bar
            });
        });
    </script>
</head>
<body>
<div id="principal">
    <div id="topo">
        <div id="logo">
            <a href="/">
                <img src="{{ MEDIA_URL }}img/logo_s1.png" alt="Juvenis">
            </a>
        </div>
        <div id="busca">
            <form class="formSearch relative left" action="busca" method="get">
                <div id="caixa">
                    <input class="tc" type="text" width="14" placeholder="O que você procura" name="buscap" />
                </div>
            </form>
        </div>
    </div>
{% include "menu.html" %}